<template>
	<view class="house">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="车辆详情" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body" style="padding-left: 20rpx; padding-right: 20rpx; background-color: #FEFEFE;">
			<!-- 房屋绑定 -->

			<u-form labelPosition="left" :model="model1" :rules="rules" ref="form1">
				<view class="uni-flex-center">
					<view class="main-service uni-cell-90">
						<view class="user-list">
							<view style="padding-left: 30rpx; padding-right: 30rpx;">
								<u-form-item label="绑定车位" prop="userInfo.park_value" labelWidth="70" borderBottom>
									<u-input v-model="model1.userInfo.park_value" disabled disabledColor="#FFFFFF" placeholder="绑定车位" border="none"
										style="background-color: #FFFFFF;"></u-input>
								</u-form-item>
								<view>
									<u-form-item label="车牌号码" prop="userInfo.number" required labelWidth="70"
										borderBottom >
										<u-input disabled v-model="model1.userInfo.number" placeholder="车牌号码"
											border="none" disabledColor="#FFFFFF" style="background-color: #FFFFFF;">
										</u-input>
									</u-form-item>
								</view>

								<u-form-item label="车主姓名" prop="userInfo.name" required labelWidth="70" borderBottom>
									<u-input v-model="model1.userInfo.name" disabled disabledColor="#FFFFFF" placeholder="车主姓名" border="none"
										style="background-color: #FFFFFF;"></u-input>
								</u-form-item>
								<u-form-item label="车主电话" prop="userInfo.tel" required labelWidth="70" borderBottom>
									<u-input disabled v-model="model1.userInfo.tel" placeholder="车主电话" border="none"
										disabledColor="#FFFFFF" style="background-color: #FFFFFF;"></u-input>
								</u-form-item>
								<u-form-item label="身份证号" prop="userInfo.id_card" required labelWidth="70" borderBottom>
									<u-input disabled v-model="model1.userInfo.id_card"  placeholder="身份证号"
										border="none" disabledColor="#FFFFFF" style="background-color: #FFFFFF;">
									</u-input>
								</u-form-item>
								<u-form-item label="车辆类型" prop="userInfo.type_value" required labelWidth="70"
									borderBottom>
									<u-input disabled v-model="model1.userInfo.type_value"  placeholder="车辆类型"
										border="none" Color="#FFFFFF" disabledColor="#FFFFFF" style="background-color: #FFFFFF;">
									</u-input>
								</u-form-item>
								<u-form-item label="品牌" prop="userInfo.brand" labelWidth="70" borderBottom>
									<u-input v-model="model1.userInfo.brand" disabled disabledColor="#FFFFFF" placeholder="品牌" border="none"
										style="background-color: #FFFFFF;"></u-input>
								</u-form-item>
								<u-form-item label="车系" prop="userInfo.model" labelWidth="70" borderBottom>
									<u-input v-model="model1.userInfo.model" disabled disabledColor="#FFFFFF" placeholder="车系" border="none"
										style="background-color: #FFFFFF;"></u-input>
								</u-form-item>
							</view>
						</view>
					</view>
				</view>
				<view class="uni-flex-center">
					<view class="main-service uni-cell-90">
						<view class="user-list">
							<view style="padding-left: 30rpx; padding-right: 30rpx;">
								<u-form-item label="车辆牌照" prop="userInfo.photo" required labelWidth="70" borderBottom>

								</u-form-item>
								<view style="margin-top: 20rpx;">
									<u-upload :fileList="fileList1" name="1"
										multiple :maxCount="1"></u-upload>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-form>
			
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="showmodal" :showCancelButton="true" confirmColor="#0B868E"
		:closeOnClickOverlay="true" :title='content' @close="showmodal=false" @cancel="showmodal=false" @confirm="confirm"></u-modal>
		<u-button v-if="model1.userInfo.status!=0" :customStyle="btnStyle" @click="showmodal=true">删除</u-button>
	</view>
</template>

<script>
	import {
		editCar,delCar
	} from "@/service/userService.js";
	export default {
		data() {
			return {
				btnStyle: {
					width: '96%',
					borderRadius: '40rpx',
					marginLeft: '2%',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF',

					position: 'fixed',
					bottom: '40rpx'
				},
				carKeyShow: false,
				showType: false,
				telKeyShow: false,
				cardKeyShow: false,
				model1: {
					userInfo: {
						id:0,
						park: '',
						number: '',
						name: '',
						tel: '',
						id_card: '',
						type: '',
						type_value: '',
						brand: '',
						model: '',
						image: '',
						status:0,
					},
				},
				fileList1: [],
				
				cid: 0,
				showmodal:false,
				content:''
			}
		},
		onLoad(options) {
			// console.log(options);
			this.cid = options.cid;
			if (this.cid != 0) {
				this.model1.userInfo = JSON.parse(options.item);
				this.fileList1 = [{
					url: this.model1.userInfo.image
				}];
				this.content='您确定要删除' +this.model1.userInfo.number+' 的信息吗？';
			}
			
		},
		methods: {
			confirm(){
				delCar({
					id:this.model1.userInfo.id
				}).then(res=>{
					if(res.code==200){
						this.$refs.uToast.show({
						
							type: 'success',
							title: '成功',
							message: res.msg,
							complete() {
								
							}
						})
						getCar().then(this.getCar);
					}else{
						this.$refs.uToast.show({
						
							type: 'error',
							title: '失败',
							message: res.msg,
							complete() {
								
							}
						})
					}
				})
				
			},
			submit() {
				let par = this.model1.userInfo;
				par.cid = this.cid;
				editCar(par).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({

							type: 'success',
							title: '成功',
							message: res.msg,
							complete() {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					} else {
						this.$refs.uToast.show({

							type: 'error',
							title: '失败',
							message: res.msg,
							complete() {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					}
				})
			},
			carChange(val) {
				this.model1.userInfo.number += val;
			},
			confirmCar() {
				this.carKeyShow = false;
			},
			backspaceCar() {
				// 删除value的最后一个字符
				if (this.model1.userInfo.number.length) this.model1.userInfo.number = this.model1.userInfo.number.substr(0,
					this
					.model1.userInfo.number.length - 1);
			},
			typeSelect(e) {
				this.model1.userInfo.type = e.value;
				this.model1.userInfo.type_value = e.name;
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.model1.userInfo.tel += val;

				this.$refs.form1.validateField('userInfo.tel');
			},
			confirmTel() {
				this.telKeyShow = false;
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.model1.userInfo.tel.length) this.model1.userInfo.tel = this.model1.userInfo.tel.substr(0, this
					.model1.userInfo.tel.length - 1);
			},
			// 按键被点击(点击退格键不会触发此事件)
			cardChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.model1.userInfo.id_card += val;

				this.$refs.form1.validateField('userInfo.id_card');
			},
			confirmIdCard() {
				this.cardKeyShow = false;
			},
			// 退格键被点击
			backspaceCard() {
				// 删除value的最后一个字符
				if (this.model1.userInfo.id_card.length) this.model1.userInfo.id_card = this.model1.userInfo.id_card
					.substr(0,
						this.model1.userInfo.id_card.length - 1);
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				this.model1.userInfo.image = "";
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://admin.gslhzhwy.com/api/upload/file', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 's'
						},
						success: (res) => {
							let par = JSON.parse(res.data);
							if (par.code == 1) {
								this.model1.userInfo.image = par.data.url;
							}
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style>
</style>
